<template>
  <!--new user 管返-->
  <view class="guanfan">
    <view class="new_user_content">
      <view class="new_user">
        <view @click="toNewUser">
          <image class="yiwen" :src="BaseImgUrl + '/guanfan/home/yiwen.png'" mode="widthFix"/>
          <text>新人如何使用领食</text>
        </view>
        <view class="bcbz" v-if="dataList.length>0">
          <u-swiper
              :list="dataList"
              :autoplay="true"
              indicator
              indicatorMode="line"
              radius="5"
              show-menu-by-longpress
              keyName="image"
              autoplay
              bgColor="#FFEBEB"
              @click="clickImg"
              circular width="240rpx" height="200rpx">
          </u-swiper>
        </view>
      </view>
    </view>
    <view class="guanfan_right">
      <view style="position: relative;height: 130rpx" @click="toGFBWC">
        <cache-image :img-src="BaseImgUrl + '/guanfan/home/mt_bg.png'" class="meituan"
                     height="133rpx" width="100%"/>
        <view class="metian_contetn">
          <view class="title">美团官方霸王餐</view>
          <view style="margin-top: 10rpx">
            <text class="sub_title">超划算 官方秒返</text>
            <text class="go">GO></text>
          </view>
        </view>
      </view>
      <view style="position: relative;height: 130rpx">
        <!-- #ifdef APP-PLUS || MP-->
        <view @click="toELMRedBag">
          <image class="elm" :src="BaseImgUrl + '/guanfan/home/elm_bg.png'" mode="widthFix"/>
          <view class="elm_contetn">
            <view class="title">饿了么福利</view>
            <view style="margin-top: 10rpx">
              <text class="sub_title">外卖补贴红包</text>
              <text class="go">GO></text>
            </view>
          </view>
        </view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <image class="elm" :src="BaseImgUrl + '/guanfan/home/elm_bg.png'" mode="widthFix"/>
        <view class="elm_contetn">
          <view class="title">饿了么福利</view>
          <view style="margin-top: 10rpx">
            <text class="sub_title">外卖补贴红包</text>
            <text class="go">GO></text>
          </view>
        </view>
        <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                              :username="commonInfoStore.reward.popup[1].original_id"
                              :path="commonInfoStore.reward.popup[1].path"
                              style="position: absolute;z-index: 89;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #1db9ff;margin-top: 20rpx">
          <component :is="'script'" type='text/wxtag-template' style="display: block;">
            <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
          </component>
        </wx-open-launch-weapp>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>
<script setup>


import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {getBannerNavAPI} from "../../services";
import {BaseImgUrl, BaseURL} from "../../utils/lshttp";
import {toMiniAppRedPage, toPageUtils} from "../../utils/utils";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
import CacheImage from "../../components/CacheImage.vue";

const commonInfoStore = useCommonInfoStore()
const emits = defineEmits(['toGFBWC'])
const dataList = ref([])
onLoad(async () => {
  const res = await getBannerNavAPI(5)
  dataList.value = res.result
  dataList.value.forEach((item) => {
    item.image = BaseURL + item.image
  })

  // #ifdef H5
  await commonInfoStore.initJSDKConfig()
  // #endif
})
// 监听跳转
const handleLaunch = () => {
  console.log('跳转');
}
// 监听错误
const handleError = () => {
  console.log('失败');
}
const toGFBWC = () => {
  emits('toGFBWC')
}
const toNewUser = () => {
  uni.navigateTo({
    url: "/pages/index/novice"
  })
}
const toELMRedBag = () => {
  const item = {
    original_id: commonInfoStore.reward.popup[1].original_id,
    appid: commonInfoStore.reward.popup[1].appid,
    path: commonInfoStore.reward.popup[1].path
  }
  toMiniAppRedPage(item)
}
const clickImg = (index) => {
  const item = dataList.value[index]
  toPageUtils(item)
  // if (dataList.value[index].type === 4) {
  //   const item = {
  //     original_id: dataList.value[index].original_id,
  //     appId: dataList.value[index].appid,
  //     path: dataList.value[index].path,
  //   }
  //   toMiniAppRedPage(item)
  // } else {
  //   toPageUtils(item)
  //   if (dataList.value[index].name === "赚钱") {
  //     uni.switchTab({
  //       url: dataList.value[index].path.toString()
  //     })
  //     return
  //   }
  //   uni.navigateTo({
  //     url: dataList.value[index].path.toString()
  //   })
  // }
}
</script>
<style lang="scss">
.guanfan {
  display: flex;

  .new_user_content {
    background-color: #FFFFFF;
    border-radius: 8rpx;
    margin: 0 20rpx 0 26rpx;
    height: 282rpx;

    .new_user {
      background: linear-gradient(180deg, #FFEBEB 0%, #FFFFFF 100%);
      padding: 5rpx 20rpx 0;
      border-radius: 8rpx;

      .yiwen {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }

      text {
        font-size: 22rpx;
        color: #EF481B;
      }

      .bcbz {
        width: 250rpx;
        margin-top: 20rpx;
      }
    }
  }

  .guanfan_right {
    margin-right: 30rpx;
    flex: 1;

    image {
      width: 386rpx;
    }

    .elm {
      margin-top: 20rpx;
    }

    .guanfan_icon {
      position: absolute;
      right: 0;
      width: 72rpx;
      height: 34rpx;
    }
  }

  .title {
    font-size: 30rpx;
    font-weight: bold;
  }

  .sub_title {
    font-size: 24rpx;
    font-weight: bold;
    color: #000000;
  }

  .go {
    width: 60rpx;
    height: 32rpx;
    margin-left: 10rpx;
    line-height: 32rpx;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    opacity: 1;
    font-size: 20rpx;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    display: inline-block;
  }

  .metian_contetn {
    position: absolute;
    top: 0;
    left: 20rpx;
    margin-top: 20rpx;
    z-index: 88;

    .title {
      color: #F58B00;
    }

    .go {
      background: #FDA026;
    }
  }

  .elm_contetn {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    margin-top: 20rpx;
    z-index: 88;

    .title {
      color: #0092FE;
    }

    .go {
      background: #0191FA;
    }
  }
}
</style>
